import React from 'react';
import { Attendance, statusOptions } from '../types';

interface AttendanceTableProps {
  attendances: Attendance[];
  onViewDetail: (attendance: Attendance) => void;
  onEdit: (attendance: Attendance) => void;
  onDelete: (attendance: Attendance) => void;
}

const AttendanceTable: React.FC<AttendanceTableProps> = ({
  attendances,
  onViewDetail,
  onEdit,
  onDelete,
}) => {
  // 获取状态对应的标签信息
  const getStatusLabel = (status: string) => {
    return statusOptions.find(option => option.value === status) || { label: status, color: 'default' };
  };

  // 渲染空数据状态
  if (attendances.length === 0) {
    return (
      <div className="empty-state">
        <div className="empty-state-icon">📊</div>
        <div className="empty-state-text">暂无考勤记录</div>
      </div>
    );
  }

  return (
    <table className="attendance-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>考勤日期</th>
          <th>学生姓名</th>
          <th>班级</th>
          <th>考勤状态</th>
          <th>备注</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        {attendances.map((attendance, index) => {
          const statusLabel = getStatusLabel(attendance.status);
          return (
            <tr key={attendance.id}>
              <td>{index + 1}</td>
              <td>{attendance.date}</td>
              <td>
                {attendance.studentName}
                <br />
                <span style={{ fontSize: '12px', color: '#999' }}>{attendance.studentId}</span>
              </td>
              <td>{attendance.className}</td>
              <td>
                <span className={`status-badge ${attendance.status}`}>
                  {statusLabel.label}
                </span>
              </td>
              <td>{attendance.remark || '-'}</td>
              <td>
                <div className="action-buttons">
                  <button
                    className="btn btn-view"
                    onClick={() => onViewDetail(attendance)}
                    title="查看详情"
                  >
                    查看
                  </button>
                  <button
                    className="btn btn-edit"
                    onClick={() => onEdit(attendance)}
                    title="编辑"
                  >
                    编辑
                  </button>
                  <button
                    className="btn btn-delete"
                    onClick={() => onDelete(attendance)}
                    title="删除"
                  >
                    删除
                  </button>
                </div>
              </td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

export default AttendanceTable;